<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:replace="layout::head">
</head>
<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
<body class="hold-transition skin-blue layout-top-nav theme2">
	<div class="wrapper">

		<header th:replace="layout::mainHeader"> </header>
		<!-- Full Width Column -->
		<div class="content-wrapper">
			<div class="container">
				<!-- Content Header (Page header) -->
				<section th:replace="layout::contentHeader"></section>

				<!-- Main content -->
				<section class="content">
					<div class="box box-info">
						<div class="box-header with-border">
							<h5 class="box-title list-title"></h5>
							<a class="btn btn-flat btn-xs btn-info pull-right" th:href="@{/edit}">信息录入</a>
						</div>
						<!-- /.box-header -->
						<div class="box-body">
							<form class="form-horizontal" id="eventQueryForm">
								<div class="form-group">
									<label for="inputEmail3" class="col-md-2 control-label">姓名</label>
									<div class="col-md-2">
										<input type="text" name="name" class="form-control" id="inputEmail3" placeholder="">
									</div>

									<label for="idnum" class="col-md-2 control-label">身份证号</label>
									<div class="col-md-3">
										<input type="text" name="idNum" class="form-control" id="idnum" placeholder="">
									</div>

									<label for="gender" class="col-md-1 control-label">性别</label>
									<div class="col-md-1">
										<select id="gender" name="gender" data-constGroup="GENDER" class="form-control no-padding">
										<option value="">不限</option>
										</select>
									</div>

								</div>
								<div class="form-group">
									<label for="eventTime" class="col-md-2 control-label">事件时间</label>
									<div class="col-md-4 ">
										<div class="input-group">
										<input type="text" name="timeRange" class="form-control" id="timeRange" data-default="" data-daterangepicker placeholder="">
										<div class="input-group-addon" onclick="javascript:$('#timeRange').val('');">
					                      <a class="fa fa-trash-o" href="javascript:" data-toggle="tooltip" data-original-title="点击清除输入的日期"></a>
					                    </div>
					                    </div>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-2 control-label" for="inputKeyword">关键字<i class="fa fa-question-circle text-blue" data-toggle="tooltip" data-original-title="关键字用来搜索简要警情、人员情况或派出所备注。多个关键字之间用逗号隔开，最多只接受3个关键字。如果超过3个，只取前3个。"></i></label>
									<div class="col-md-4 ">
										<div class="input-group">
										<input type="text" name="keyword" class="form-control" id="inputKeyword" 
										placeholder="多个关键字之间用逗号分隔">
										<div class="input-group-addon" onclick="javascript:$('#inputKeyword').val('');">
					                      <a class="fa fa-trash-o" href="javascript:" data-toggle="tooltip" data-original-title="点击清除关键字"></a>
					                    </div>
					                    </div>
										
									</div>
									<div class="col-md-1">
										<button type="button" onclick="queryEvent();return false;" class="btn btn-default">查询</button>
									</div>
								</div>
							</form>

							<div class="table-responsive no-padding">
								<table class="table table-hover table-bordered" id="eventTable">
									<thead>
										<tr>
											<th>类别</th>
											<th>姓名</th>
											<th>性别</th>
											<th>身份证号</th>
											<th>事件时间</th>
											<th>录入时间</th>
											<th>录入民警</th>
											<th>录入单位</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>
						</div>
						<div class="box-footer clearfix">
						</div>
					</div>
					<!-- /.box -->
				</section>
				<!-- /.content -->
			</div>
			<!-- /.container -->
		</div>
		<!-- /.content-wrapper -->
		<footer class="main-footer" th:replace="layout::footer"> </footer>
	</div>
	<!-- ./wrapper -->
	<script type="text/javascript">
</script>
</body>
</html>
